<template>
  <div class="banner-com">
    <swiper  ref="mySwiper" id="mySwiper" :options="swiperOption">
      <!--                    :style="getBg(item)"
-->
      <swiper-slide
        :class="{'canClick':item.link,}"
                    :data-link="item.link"
                    :key="index"
                    v-for="(item,index) in header.bannerList">
        <img :data-src="getUrl(item.img)" class="swiper-lazy">
        <div class="swiper-lazy-preloader"></div>
      </swiper-slide>
      <!--小点点-->
      <div class="swiper-pagination" slot="pagination"></div>
      <!--箭头-->
      <div class="swiper-button-prev d-none d-sm-none d-md-block d-lg-block " slot="button-prev">
        <span class="icon iconfont icon-arrow-l"></span>
      </div>
      <div class="swiper-button-next d-none d-sm-none d-md-block d-lg-block" slot="button-next">
        <span class="icon iconfont icon-arrow-r"></span>
      </div>
    </swiper>
  </div>
</template>

<script>
  // require styles
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    props:['header'],
    computed: {},
    watch: {
      header: function (val) {
        this.banners = []
        for (let item of val.bannerList) {
          this.banners.push(item)
        }
      }
    },
    data() {
      return {
        mySwiper:{},
        banners: [
        ],
        swiperOption: {
          loop:false,
          lazy: true,
          pagination: {
            el: '.swiper-pagination'
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          on :{
            init:  () => {
              //this.mySwiper = document.querySelector('#mySwiper').swiper
            },
            click: (e)=> {
              try {
                let link = e.target.getAttribute('data-link')
                if(!this.isNullOrEmpty(link)){
                  location.href = link
                }
              }catch (e) {}
            },
          }
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {

    },
    mounted() {

    },
    methods: {
      getBg(item) {
        return {
          backgroundImage: 'url(' + this.getUrl(item.img) + ')'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .banner-com{
    .canClick{
      cursor: pointer;
    }
    height: 400px;
    .swiper-container{
      height: 100%;
      .swiper-slide{
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        img{
          max-width: 100%;
          height: 100%;
          margin: 0 auto;
        }

        span {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
    .icon{
      font-size: 30/@size;
      width: 30/@size;
      height: 30/@size;
    }
  }

  @media (min-width: 320px) and (max-width:767px) {
    .banner-com{
      height: 250/@size;
      margin-top: 80/@size;
      
    }
    .icon{
      font-size: 30/@size;
      width: 30/@size;
      height: 30/@size;
    }
  }



</style>
